import { formatCount, convertCurrency } from '@/utils/common.js';

function rentlifeViews(info){
  var str = convertCurrency(info.receivableAmount)
  var moneyArray = []
  var index = 0
  for (var item of str) {
    moneyArray.push({
      type: 'text',
      text: item,
      css: {
        fontWeight: (index + 2 >= str.length || index % 2) ? '400' : 'bold',
        paddingLeft: '6rpx'
      }
    })
    index++
  }

  var labels = ['项目', '上月', '本月', '实用', '单价', '金额']
  var labesArray = []
  var i = 0
  for (var item of labels) {
    labesArray.push({
      type: 'view',
      css: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: i == 0 ? '86rpx' : (i + 1 >= labels.length ? '144rpx' : '80rpx'),
        height: '34rpx',
        border: '0 solid #333333',
        borderRightWidth: '1rpx',
        boxSizing: "border-box",
        borderBottomWidth: '1rpx',
      },
      views: [
        {
          type: 'text',
          text: item
        }
      ]
    })
    i++
  }
  var detailArray = []
  for (var item of ['水费(吨)', '电费(度)']) {
    var a1 = {}, a2 = {}, a3 = {}, a4 = {}, a5 = {}
    for (var data of info.expenseDetails) {
      if (data.name == item) {
        a1 = {
          type: 'text',
          text: data.old
        }
        a2 = {
          type: 'text',
          text: data.new
        }
        a3 = {
          type: 'text',
          text: data.number
        }
        a4 = {
          type: 'text',
          text: data.unitPrice
        }
        a5 = {
          type: 'text',
          text: formatCount(Number(data.unitPrice || 0) * Number(data.number || 0))
        }
        break
      }
    }
    detailArray.push({
      type: 'view',
      css: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '86rpx',
        height: '34rpx',
        border: '0 solid #333333',
        borderRightWidth: '1rpx',
        borderBottomWidth: '1rpx',
        boxSizing: "border-box",
        "flex-shrink": 0
      },
      views: [
        {
          type: 'text',
          text: item
        }
      ]
    },
      {
        type: 'view',
        css: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: '80rpx',
          height: '34rpx',
          border: '0 solid #333333',
          borderRightWidth: '1rpx',
          borderBottomWidth: '1rpx',
          boxSizing: "border-box",
        },
        views: [
          a1
        ]
      },
      {
        type: 'view',
        css: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: '80rpx',
          height: '34rpx',
          border: '0 solid #333333',
          borderRightWidth: '1rpx',
          borderBottomWidth: '1rpx',
          boxSizing: "border-box",
        },
        views: [
          a2
        ]
      }, {
      type: 'view',
      css: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '80rpx',
        height: '34rpx',
        border: '0 solid #333333',
        borderRightWidth: '1rpx',
        borderBottomWidth: '1rpx',
        boxSizing: "border-box",
      },
      views: [
        a3
      ]
    }, {
      type: 'view',
      css: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '80rpx',
        height: '34rpx',
        border: '0 solid #333333',
        borderRightWidth: '1rpx',
        borderBottomWidth: '1rpx',
        boxSizing: "border-box",
      },
      views: [
        a4
      ]
    }, {
      type: 'view',
      css: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '144rpx',
        height: '34rpx',
        border: '0 solid #333333',
        borderBottomWidth: '1rpx',
        borderRightWidth: '1rpx',
        boxSizing: "border-box",
      },
      views: [
        a5
      ]
    }
    )
  }
  var details = [{
    label: '房租',
    css: {
      width: '464rpx',
      borderBottomWidth: '1rpx',
    },
    labelCss: {
      borderBottomWidth: '1rpx',
    }
  }, {
    label: '卫生费',
    css: {
      width: '100rpx',
      borderBottomWidth: '1rpx',
    },
    labelCss: {
      borderBottomWidth: '1rpx',
    }
  }, {
    label: '电视费',
    css: {
      width: '100rpx',
      borderBottomWidth: '1rpx',
    },
    labelCss: {
      borderBottomWidth: '1rpx',
    }
  }, {
    label: '网费',
    css: {
      width: '92rpx',
      borderBottomWidth: '1rpx',
    },
    labelCss: {
      borderBottomWidth: '1rpx',
    }
  }, {
    label: '管理费',
    css: {
      width: '100rpx',
    },
    labelCss: {}
  }, {
    label: '其他',
    css: {
      width: '278rpx',
    },
    labelCss: {}
  }]
  for (var item of details) {
    var a = {}
    for (var data of info.expenseDetails) {
      if (item.label == data.name) {
        a = {
          type: 'text',
          text: formatCount(Number(data.unitPrice || 0) * Number(data.number || 0))
        }
      }
    }
    detailArray.push({
      type: 'view',
      css: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '86rpx',
        height: '34rpx',
        border: '0 solid #333333',
        borderRightWidth: '1rpx',
        boxSizing: "border-box",
        "flex-shrink": 0,
        ...item.labelCss
      },
      views: [
        {
          type: 'text',
          text: item.label
        }
      ]
    },
      {
        type: 'view',
        css: {
          display: 'flex',
          alignItems: 'center',
          height: '34rpx',
          border: '0 solid #333333',
          boxSizing: "border-box",
          justifyContent: 'center',
          border: '0 solid #333333',
          borderRightWidth: '1rpx',
          ...item.css,
        },
        views: [
          a
        ]
      })
  }


  return {
    css: {
      backgroundColor: '#FFFFFF',
      width: '702rpx',
      padding: '15rpx',
      boxSizing: "border-box",
      fontSize: '14rpx',
      'line-height': '17rpx'
    },
    views: [
    // 标题
    {
        type: 'view',
        css: {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column',
          fontWeight: 'bold',
          textAlign: 'center',
          marginBottom: '28rpx',
          position: 'relative',
          width: '654rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              height: '34rpx',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              position: 'relative',
              fontSize: '22rpx',
              marginTop: '10rpx'
            },
            views: [
              {
                type: 'text',
                text: info.repairShopName,
              }]
          },
          {
            type: 'view',
            css: {
              height: '6rpx',
              color: 'transparent',
              border: '0 solid #333333',
              borderBottomWidth: '1rpx',
              borderTopWidth: '1rpx',
              'box-sizing': 'border-box',
              position: 'relative',
              fontSize: '22rpx',
            },
            views: [
              {
                type: 'text',
                text: info.repairShopName,
              }]
          },
          {
            type: 'view',
            css: {
              top: 0,
              left: 0,
              position: 'absolute',
            },
            views: [
              {
                type: 'image',
                src: info.extend.logo  ? (info.extend.logo += '?imageView2/2/h/84') : '',
                css: {
                  'flex-shrink': 0,
                  height: '56rpx',
                  // width: '56rpx',
                  marginLeft: '28rpx'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              top: '24rpx',
              right: 0,
              position: 'absolute',
              color: '#875A38'
            },
            views: [
              {
                type: 'text',
                text: info.number,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }
        ]
      },
      // top 行
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'flex-start',
          minHeight: '26rpx',
          marginBottom: '4rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              width: '248rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '客户：'
              },
              {
                type: 'text',
                text: info.customer.name,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          },
          {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '房号：'
              },
              {
                type: 'text',
                text: info.expenseDetails[0].value,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              width: '200rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '时间：'
              },
              {
                type: 'text',
                text: info.repairTime.split(' ')[0],
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }
        ]
      },
      // table
      {
        type: 'view',
        css: {
          border: '2rpx solid #333333',
          display: 'flex',
          alignItems: 'flex-start',
          // justifyContent: 'space-between',
          'flex-wrap': 'wrap',
          marign: '4rpx 0 8rpx 0',
          'box-sizing': 'border-box',
        },
        views: [
          // table 左
          {
            type: 'view',
            css: {
              width: '550rpx',
              display: 'flex',
              alignItems: 'center',
              'flex-wrap': 'wrap',
              'flex-shrink': 0,
              justifyContent: 'space-between',
              'box-sizing': 'border-box',
            },
            views: [
              ...labesArray,
              ...detailArray
            ]
          },
          // table 右
          {
            type: 'view',
            css: {
              width: '118rpx',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              'flex-wrap': 'wrap',
              'flex-shrink': 0,
              flex: 1,
              'box-sizing': 'border-box',
            },
            views: [
              {
                type: 'view',
                css: {
                  width: '118rpx',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: '备注/说明'
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '100%',
                  display: 'flex',
                  justifyContent: 'center',
                  height: '34rpx',
                  padding: '8rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: info.remark || ' ',
                    css: {
                      'line-height': '18rpx',
                      fontWeight: 'bold'
                    }
                  }
                ]
              }
            ]
          },
          // 合计行
          {
            type: 'view',
            css: {
              width: '100%',
              display: 'flex',
              alignItems: 'center',
              'box-sizing': 'border-box',
              border: '0 solid #333333',
              borderTopWidth: '1rpx',
            },
            views: [
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: '85rpx',
                  height: '52rpx',
                  "flex-shrink": 0,
                },
                views: [
                  {
                    type: 'text',
                    text: '合计人民币\n(大写）',
                    css: {
                      textAlign: 'center'
                    }
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'center',
                  width: '400rpx',
                  'box-sizing': 'border-box',
                  paddingLeft: '16rpx',
                  border: '0 solid #333333',
                  borderLeftWidth: '1rpx',
                  height: '52rpx',
                },
                views: [
                  ...moneyArray
                ]
              },
              (info.extend.sealType == '1' || info.extend.sealType == '2') && info.extend.sealUrl ?
                {
                  type: 'view',
                  css: {
                    width: '1rpx',
                    height: '52rpx',
                    display: 'flex',
                    alignItems: 'center',
                  },
                  views: [
                    {
                      type: 'image',
                      src: info.extend.sealUrl,
                      css: {
                        'flex-shrink': 0,
                        height: '96rpx',
                        marginLeft: info.extend.sealType == '2' ? '48rpx' : 0
                      }
                    }
                  ]
                } : {},
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'center',
                  width: '180rpx',
                  height: '52rpx',
                },
                views: [
                  {
                    type: 'text',
                    text: '￥' + formatCount(info.receivableAmount),
                    css: {
                      // paddingRight: '120rpx',
                      'white-space': 'nowrap',
                    }
                  }
                ]
              }
            ]
          },
        ]
      },
      // bottom 行
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          height: '34rpx',
          marginTop: '4rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'center',
            },
            views: [
              {
                type: 'text',
                text: '应收金额：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: '￥' + formatCount(info.receivableAmount),
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'center',
            },
            views: [
              {
                type: 'text',
                text: '实收金额：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: '￥' + formatCount(info.actualAmount),
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'center',
            },
            views: [
              {
                type: 'text',
                text: '欠款金额：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: '￥' + formatCount(Math.max(Number(info.receivableAmount) - Number(info.actualAmount), 0)),
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }
        ]
      },
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'flex-start',
          height: '34rpx',
          marginTop: '4rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '开票人：',
                css: {
                  'flex-shrink': 0,
                }
              },
              info.extend.sealUrl && info.extend.sealType == '4' ?
                {
                  type: 'image',
                  src: info.extend.sealUrl,
                  css: {
                    'flex-shrink': 0,
                    height: '28rpx',
                  }
                } : {}
            ]
          },
          {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '收款人：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: info.lister,
                css: {
                  fontWeight: 'bold',
                }
              }
            ]
          }, info.extend.customerSignSwitch ? {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '客户签名：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'image',
                src: info.extend.customerSign += '?imageView2/2/h/40',
                css: {
                  height: '24rpx',
                }
              }
            ]
          } : {
          }
        ]
      },
    ]
  }
}
export default rentlifeViews